<template>
    <div class="reinforce">
        <div>{{reinforce.value}}</div>
        <div v-for="i in reinforce.value" :key="'reinforce.solider.' + i" class="solider" :style="{transform: transform(i)}"></div>
    </div>
</template>
<script>
    import config from '../config';

    const x = [0, -1,  1, -2,  0,  2, -1,  1, -3,  3,  0,  2, -2, -4,  4];
    const y = [0,  1,  1,  2,  2,  2,  3,  3,  3,  3,  4,  4,  4,  4,  4]

    export default {
        props: {
            reinforce: Object,
        },
        methods: {
            transform(i) {
                let index = i - 1;
                return 'translate(' + (x[index] * 0.35) + 'rem, ' + (y[index] * 0.35) + 'rem)';
            }
        }
    }
</script>
<style lang="less" scoped>
    .reinforce {
        position: relative;
        width: 2rem;
        height: 3.5rem;
        .solider {
            position: absolute;
            width: 2rem;
            height: 2rem;
            left: 0;
            bottom: 0;
            background-image: url("./images/buff/reinforce.png");
            background-size: cover;
        }
    }
</style>